<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>flyingon视图模型演示</title>
    <link rel="stylesheet" type="text/css" href="../css/default/flyingon.css" />
    <style type="text/css">

    html, body {
        margin:0;
        border:0;
        padding:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    </style>
    <script type="text/javascript" src="../js/flyingon.js"></script>
</head>
<body>

    <div id="host" style="width:100%;height:100%;overflow:hidden;">
    </div>

    <script type="text/x-template" id="template">
        <Panel :layout="layout" height="100%" padding="10">
            <item-demo #loop="items(item, index)" 
                :item-text="item.text" 
                :item-index="index" 
                :subitems="item.items"
                @click="operate_click(item, index)"/>
            <Label :text="text" />
        </Panel>
    </script>


    <script type="text/javascript">


        flyingon.widget('item-demo', {

            template: {
                Class: 'div',
                height: 75,
                children: [
                    { Class: 'Label', width: 90, ':text': 'item_label(item-index)', style: 'display:inline-block;' },
                    { Class: 'TextBox', ':value': 'item-text', width: 120, '#model': 'item-text' },
                    { Class: 'Button', ':text': 'operate.add', tag: 'add', margin: '0 5' },
                    { Class: 'Button', ':text': 'operate.edit', tag: 'edit' },
                    { Class: 'Button', ':text': 'operate.remove', tag: 'remove', margin: '0 5' },
                    { Class: 'div', width: 'auto', height: 50, padding: '4 0 4 90', style:'overflow:hidden;', 
                        children: [
                            { Class: 'div', '#loop': 'subitems(subitem)', ':width': 'subitem_width(subitem)', style: 'margin:2px 0;background-color:silver;height:5px;' }
                        ]
                    }
                ]
            },

            defaults: {

                operate: {
                    add: 'add',
                    edit: 'edit',
                    remove: 'remove'
                }
            },

            extend: function (vm) {


                vm.item_label = function (index) {

                    return ++index + '. ' + this.$get('item-text');
                };

                vm.subitem_width = function (value) {

                    return value * 10 + 20;
                };

            }

        });



        var data = [];

        for (var i = 0; i < 3; i++)
        {
            data.push({ text: 'text ' + i, items: ('' + (Math.random() * 100000 | 0)).split('') });
        }



        var host = flyingon.view({
            
            host: 'host',

            template: '#template',

            defaults: {

                layout: 'vertical-line',

                text: 'text ...',

                items: data
            },

            creating: function (vm) {


                vm.operate_click = function (item, index, control, event) {
                        
                    switch (event.target.tag())
                    {
                        case 'add':
                            this.items.push({ text: Math.random() * 10000000 | 0, items: ('' + (Math.random() * 100000 | 0)).split('') });
                            break;

                        case 'edit':
                            this.items[index].$set('items', ('' + (Math.random() * 100000 | 0)).split(''));
                            //this.items.$set(index, { 'text': Math.random() * 10000000 | 0, items: ('' + (Math.random() * 100000 | 0)).split('') });
                            break;

                        case 'remove':
                            this.items.splice(index, 1);
                            break;
                    }
                };

              
                vm.$watch(function (data) {

                    //debugger
                });

            }


        });


        flyingon.dom_on(window, 'resize', function () {

            host.update();
        });
        

    </script>

</body>
</html>